<template>
	<view>
		<!-- #ifdef H5 || MP-WEIXIN -->
		<uNavbar title="购物车"> </uNavbar>
		<!-- #endif -->
		
		<view class="dddd " v-if="cartlist.length!=0">
			<text v-if="!isEdit" @click="edit">管理</text>
			<text v-else @click="edit">完成</text>
		</view>

		<view class="cartListBox" v-if="cartlist.length!=0">
			<view class="cartList" v-for="(item,index) in cartlist" :key="item.id"
				:class="!isEdit&&sameStore!=''&&sameStore != item.id?'activeShop':''">
				<view class="shopHead">
					<image v-if="!item.selected" class="checkboxHead" :src="baseUrl +'/static/icon/i_wxz.png'"
						mode="aspectFill" @click="clickShopBox(item)"></image>
					<image v-else class="checkboxHead" :src="baseUrl +'/static/icon/i_xz.png'" mode="aspectFill"
						@click="clickShopBox(item)"></image>
					{{item.name}}
				</view>

				<view class="googs_box flex_dq" v-for="(item1,index1) in item.goods_list" :key="item1.id">
					<view class="goods_xz" @click="checkBoxClick(item1)">
						<image v-if="!item1.selected" :src="baseUrl +'/static/icon/i_wxz.png'" mode="aspectFill"></image>
						<image v-else :src="baseUrl +'/static/icon/i_xz.png'" mode="aspectFill"></image>
					</view>
					<view class="mainImg">
						<image :src="item1.sku.image" mode="aspectFill"></image>
					</view>
					<view class="cartItemContent flex_Z">
						<view class="centont f30 c3">
							<text>{{item1.goods&&item1.goods.name}}</text>
						</view>
						<view class="centont f24 c9">
							<text>{{item1.sku.spec_text}}</text>
						</view>
						<view class="centont f30 c3">
							<text>￥{{item1.sku.price}}</text>
							<u-number-box v-model="item1.num" inputWidth="24" :name="item1.id" integer buttonSize="24"
								bgColor="#ffffff" @overlimit="overlimit" @change="valChange"></u-number-box>
						</view>
					</view>
				</view>
			</view>
			<view class="empty3"></view>
			<view class="cartBottom flex_r" v-if="cartlist.length!=0">
				<view class="goods_all" @click="allCheckChange" v-if="isEdit">
					<image :src="baseUrl +'/static/icon/i_xz.png'" mode="aspectFill" v-if="allCheck"></image>
					<image :src="baseUrl +'/static/icon/i_wxz.png'" mode="aspectFill" v-else></image>
					<text class="f32 c3">全选</text>
				</view>
				<view class="cartBottomRight flex_r">
					<view class="flex_c " v-if="!isEdit">
						<text class="f24 c3">合计：</text>
						<text class="heji">￥{{getAllVal.price.toFixed(2)}}</text>
					</view>
					<view class="payBtn1" v-if="!isEdit" @click="gotoPrice">
						<text>去结算</text>
						<text v-if="getAllVal.selectProcuct.length">({{getAllVal.selectProcuct.length}})</text>
					</view>
					<view class="" v-if="isEdit">

					</view>
					<view class="payBtn2" v-if="isEdit" @click="isDelecrt">
						删除
					</view>
				</view>
			</view>
		</view>

		<view class="cartEmpty flex_ZC" v-else>
			<image :src="baseUrl + '/static/image/noData1.png'" mode="aspectFill"></image>
			<text class="f28 c6">挑点喜欢的装进购物车</text>
		</view>

		<u-popup :show="isShowDetail" mode="center" @close="isShowDetail = false" closeable bgColor="transparent">
			<view class="prompt flex_ZC">
				<text class="f32 c3">提示</text>
				<view class="user_card flex_dq">
					<text class="f30 c6"> 是否删除这{{getAllVal.selectProcuct.length}}种商品?</text>
				</view>
				<view class="btn_xz flex_ld_b">
					<text @click="isShowDetail = false">我再想想</text>
					<text @click="confirm">确认删除</text>
				</view>
			</view>
		</u-popup>
		<view class="empty"></view>
	</view>
</template>

<script>
	import {
		cartList,
		cartDelete,
		cartEdit,
		cartSelectAll,
		cartClear,
		confirmcart,
		sellerSelectAll
	} from "../../api/shoppingCart.js"
	export default {
		data() {
			return {
				baseUrl: this.$imageBaseUrl,
				options2: [{
					text: '删除',
					style: {
						backgroundColor: '#f56c6c'
					}
				}],
				isEdit: false,
				isShowDetail: false,
				allCheck: false,
				cartlist: [],
				// sameStore:''
			};
		},
		// onLoad() {
		// 	this.initList()
		// },
		onShow() {
			this.initList()
		},
		computed: {
			getAllVal() {
				let arr = [].concat(...this.cartlist.map(item => item.goods_list))
				let selectProcuct = []
				let num = 0
				let price = 0
				arr.forEach(item => {
					if (item.selected) {
						num += Number(item.num)
						price += Number(item.num) * Number(item.sku.price)
						selectProcuct.push(item.id)
					}
				})

				console.log(123456);
				return {
					num,
					price,
					selectProcuct,
				}
			},
			sameStore() {
				let arr = [].concat(...this.cartlist.map(item => item.goods_list))
				let selectList = arr.filter(item => item.selected == 1)
				let aa = selectList.map(item => {
					return item.seller_id
				})
				return [...new Set(aa)].join('')
			}
		},
		methods: {
			// 购物车列表
			initList() {
				cartList().then(res => {
					console.log('购物车列表', res)
					if (res.code == 1) {
						this.cartlist = res.data.cart_list
						this.checkAllShop()
					}
				})
			},
			// 购物车是否全部选中
			checkAllShop() {
				let arr = [].concat(...this.cartlist.map(item => item.goods_list))
				let isAll = !arr.some(item => item.selected == 0)
				this.allCheck = isAll
			},
			// 编辑
			edit() {
				this.isEdit = !this.isEdit
				if (!this.isEdit) {
					this.initList()
				}
			},
			clickShopBox(shopItem) {
				// 管理操作
				console.log(shopItem);
				if (this.isEdit) {
					let num = this.cartlist.findIndex(item => item.seller_id == shopItem.seller_id)
					let selected = shopItem.selected
					this.cartlist.splice(
						num, 1, Object.assign(this.cartlist[num], {
							...shopItem,
							selected: selected == 0 ? 1 : 0,
							goods_list: shopItem.goods_list.map(item => {
								return {
									...item,
									selected: selected == 0 ? 1 : 0,
								}
							})
						})
					);
					this.checkAllShop()
				} else {
					if (shopItem.id != this.sameStore && this.sameStore != '') {
						uni.$u.toast('请选择同一家店铺的商品进行结算')
					} else {
						console.log(shopItem);
						let num2 = this.cartlist.findIndex(item => item.id == shopItem.seller_id)
						if (num2 != -1) {
							let selected = shopItem.selected
							const data = {
								seller_id: shopItem.seller_id,
								selected: selected == 0 ? 1 : 0
							}
							sellerSelectAll(data).then(res => {
								if (res.code == 1) {
									this.cartlist[num2].selected = selected == 0 ? 1 : 0
									this.initList()
								}
							})
						}
					}
				}

			},
			// 编辑
			checkBoxClick(item1) {
				console.log(item1);
				// 管理不用走接口
				if (this.isEdit) {
					// 获取当前点击商品的店铺信息
					let aa = this.cartlist.filter(item => item.seller_id == item1.seller_id)
					// 获取当前店铺在总店铺的下标
					let num1 = this.cartlist.findIndex(item => item.seller_id == item1.seller_id)
					// 获取当前点击的商品是店铺下的第几个商品
					let num2 = aa[0].goods_list.findIndex(item => item.id == item1.id)
					let selected = item1.selected
					// 修改当前当前商品的选中状态
					this.cartlist[num1].goods_list.splice(num2, 1, Object.assign(this.cartlist[num1].goods_list[num2], {
						...item1,
						selected: selected == 0 ? 1 : 0,
					}))
					// 获取当前店铺下的商品是否全部选中
					let isAll = this.cartlist[num1].goods_list.some(item => item.selected == 0)
					// 如果全部选中修改当前店铺的全选状态
					if(!isAll){
						this.cartlist.splice(num1, 1, Object.assign(this.cartlist[num1], {
							...this.cartlist[num1],
							selected: 1,
						}))
					}else{
						this.cartlist.splice(num1, 1, Object.assign(this.cartlist[num1], {
							...this.cartlist[num1],
							selected: 0,
						}))
					}
					this.checkAllShop()
				} else {
					if (item1.seller_id != this.sameStore && this.sameStore != '') {
						uni.$u.toast('请选择同一家店铺的商品进行结算')
					} else {
						let data = {
							id: item1.id,
							number: item1.num,
							selected: !item1.selected,
						}
						cartEdit(data).then(res => {
							console.log('编辑', res)
							if (res.code == 1) {
								this.initList()
							}
						})
					}
				}
			},
			// 全选
			allCheckChange() {
				let isAll = this.cartlist.some(item => item.selected == 0)
				let allCheck = 0
				if (isAll) {
					allCheck = 1
				}
				this.cartlist = this.cartlist.map(item => {
					return {
						...item,
						selected: allCheck,
						goods_list: item.goods_list.map(iten => {
							return {
								...iten,
								selected: allCheck,
							}
						})
					}
				})
				this.allCheck = allCheck
			},
			changGoods(e) {
				console.log('选取商品---', e);
				let goodsid = e.id;
				this.cartlist.forEach((item1, index1) => {
					item1.goods_list.forEach((item2, index2) => {
						if (item2.id == goodsid) {
							item2.disabled = true

							// this.delGoods()
						}
					})
				})
			},

			gotoPrice() {
				if (this.getAllVal.num > 0) {
					let data = {
						address_id: 0,
						cart_id: this.getAllVal.selectProcuct
					};
					confirmcart(data).then(res => {
						console.log('购物车下单', res)
						if (res.code == 1) {
							uni.setStorageSync('getAllVal', this.getAllVal)
							uni.navigateTo({
								url: '/pagesMy/cloudCat/confirmOrder'
							})
						}
					})
				} else {
					uni.$u.toast('请勾选商品')
				}
			},
			isDelecrt() {
				if (this.getAllVal.num > 0) {
					this.isShowDetail = true
				} else {
					uni.$u.toast('请勾选要删除的商品')
				}
			},
			confirm() {
				this.delGoods()
				this.isShowDetail = false
			},
			delGoods() {
				if (this.getAllVal.selectProcuct.length == 0) {
					uni.$u.toast('请勾选要删除的商品')
				} else {
					let data = {
						id: this.getAllVal.selectProcuct
					};
					let that = this;
					cartDelete(data).then(res => {
						console.log('删除', res)
						if (res.code == 1) {
							uni.$u.toast('删除成功')
							setTimeout(function() {
								that.initList()
							}, 1200);
						}
					})
				}
			},

			// 购物车编辑
			valChange(e) {
				let data = {
					id: e.name,
					number: e.value,
				}
				cartEdit(data).then(res => {
					console.log('编辑', res)
					if (res.code == 1) {
						this.initList()
					}
				})
			},
			overlimit() {
				uni.$u.toast('超出范围!')
			}
		}
	}
</script>

<style lang="scss" scoped>
	.dddd {
		display: flex;
		justify-content: flex-end;
		width: 690rpx;
		margin: 30rpx auto;
		font-size: 28rpx;
	}

	.pricingDetails {
		position: fixed;
		top: 0;
		z-index: 999;
		width: 100%;
		height: 100%;
		background-color: rgba(0, 0, 0, 0.35);
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.cartEmpty {
		width: 750rpx;
		height: 900rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		margin-top: 38rpx;
	}

	.cartEmpty>image {
		width: 290rpx;
		height: 240rpx;
	}

	.shopHead>image {
		width: 32rpx;
		height: 32rpx;
		margin-right: 14rpx;
	}

	.cartList {
		background-color: #ffffff;
		width: 92%;
		margin: 20rpx auto;
		border-radius: 20rpx;
		padding: 20rpx;
		box-sizing: border-box;
	}

	.checkboxHead {
		width: 36rpx;
		height: 36rpx;
	}

	.googs_box {
		width: 100%;
		margin: 16rpx 0;
	}

	.goods_xz {
		width: 60rpx;
	}

	.goods_xz>image {
		width: 30rpx;
		height: 30rpx;
	}

	.cartItemContent {
		width: 406rpx;
		// height: 160rpx;
		padding: 5rpx 0;
	}

	.mainImg {
		background-color: #f6f6f6;
		width: 160rpx;
		height: 160rpx;
		margin-right: 24rpx;
	}

	.mainImg>image {
		border-radius: 8rpx;
	}

	.centont {
		display: flex;
		align-items: center;
		justify-content: space-between;
		width: 400rpx;
		margin: 4rpx 0;
	}

	.mainImg>image {
		width: 100%;
		height: 100%;
	}


	.cartBottom {
		width: 750rpx;
		height: 142rpx;
		background-color: #ffffff;
		position: fixed;
		bottom: var(--window-bottom);
		right: 0;
		left: 0;
		z-index: 9;
		padding: 0 30rpx;
	}

	.goods_all {
		display: flex;
		align-items: center;
		justify-content: center;
		height: 66rpx;
	}

	.goods_all>image {
		width: 36rpx;
		height: 36rpx;
		margin-right: 18rpx;
	}

	.cartBottomRight {
		width: 550rpx;
	}

	.payBtn1 {
		padding: 18rpx 48rpx;
		font-size: 24rpx;
		color: #fff;
		border-radius: 33rpx;
		background: #FFC300;
		margin-left: 30rpx;
	}

	.payBtn2 {
		padding: 18rpx 48rpx;
		font-size: 24rpx;
		color: #fff;
		border-radius: 33rpx;
		background: linear-gradient(90deg, #FF6318 2%, #FC321A 95%);
		margin-left: 30rpx;
	}

	.heji {
		font-size: 42rpx;
		color: #E78C4C;
		font-weight: 500;
	}

	.prompt {
		width: 600rpx;
		background: #ffffff;
		margin: 0 auto;
		border-radius: 20rpx;
		padding-bottom: 50rpx;
	}

	.prompt>text {
		width: 66%;
		margin-top: 70rpx;
		text-align: center;
		line-height: 50rpx;
	}

	.user_card {
		margin: 30rpx auto 60rpx;
	}

	.btn_xz {
		width: 100%;
	}

	.btn_xz>text:nth-child(1) {
		width: 220rpx;
		height: 72rpx;
		line-height: 72rpx;
		text-align: center;
		color: #333333;
		background: #F2F2F2;
		border-radius: 280rpx;
	}

	.btn_xz>text:nth-child(2) {
		width: 220rpx;
		height: 72rpx;
		line-height: 72rpx;
		text-align: center;
		background: linear-gradient(90deg, #fa2522, #ffc400);
		font-size: 28rpx;
		color: #ffffff;
		border-radius: 280rpx;
	}

	.empty {
		width: 100%;
		height: var(--window-bottom);
	}

	/deep/.u-number-box__minus {
		width: 24px !important;
		height: 24rpx;
		border: 1rpx solid #999999;
		border-radius: 8rpx !important;

	}

	/deep/.u-number-box__plus {
		width: 24px !important;
		border: 1rpx solid #999999;
		border-radius: 8rpx !important;
	}

	.activeShop {
		opacity: 0.5;
	}
</style>